<template>
  <div class="children_content">
    <div class="children_content_flex">
      <div class="left_box" v-if="agentTypeList.length">
        <div class="tree_title">
          <div class="title">分类</div>
          <div>
            <Icon type="md-add" size="20" @click="addType" />
            <Icon type="md-refresh" size="20" @click="getList" />
          </div>
        </div>
        <div class="menu-box" v-loading="loading">
          <div
            class="menu-item"
            :class="{ select: selectIndex == i }"
            v-for="(item, i) in agentTypeList"
            :key="i"
            @click="handleMenuClick(i)"
          >
            <el-popover
              ref="popover"
              :width="50"
              trigger="contextmenu"
              placement="right"
            >
              <template #reference>
                <span  class="menu-item-title">{{ item.name }}</span>
              </template>
              <template #default>
                <Icon class="pointer" style="margin-right: 10px" type="ios-create-outline" size="24" @click="addType(item, i)" />
                <Icon class="pointer" type="md-trash" size="24" @click="removeType(item.id, i)" />
              </template>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="right_box" :style="{width: !agentTypeList.length ? '100%' : 'calc(100% - 270px)'}">
        <Develop ref="developRef" :type-id="typeId" :title="typeName" />
      </div>
    </div> 
    <AddTypeDialog ref="addTypeRef" @submit="getList" />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { getAgentTypeList, deleteAgentType } from '@/api/modules/agent';

import Develop from './develop/index.vue';
import AddTypeDialog from './components/AddTypeDialog.vue';

// 当前对象
const { proxy } = getCurrentInstance();
const loading = ref(false);
const selectIndex = ref(0);
const developRef = ref(null);
const typeId = ref(undefined);
const typeName = ref(undefined);

// 获取分类列表
const agentTypeList = ref([])
const getList = async() => {
  loading.value = true
  const { data } = await getAgentTypeList();
  agentTypeList.value = data;
  typeId.value = data[0]?.id;
  typeName.value = data[0]?.name;
  nextTick(() => {
    developRef.value.init()
  })
  loading.value = false
}


const handleMenuClick = (index) => {
  if (index != selectIndex.value) {
    selectIndex.value = index;
    typeId.value = agentTypeList.value[index].id;
    typeName.value = agentTypeList.value[index].name;
    nextTick(() => {
      developRef.value.init()
    })
  }
};

// 新增编辑分类
const addTypeRef = ref(null);
const popover = ref(null);

const addType = (row, index=undefined) => {
  if (index!=undefined) {
    popover.value[index].hide();
    addTypeRef.value?.init(row);
    return;
  }
  addTypeRef.value?.init();
}

// 删除分类
const removeType = (id, index) =>{
  popover.value[index].hide();
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>是否删除该分类?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await deleteAgentType({
        data: [{ id: id }],
      });
      proxy.$Message.success('确认移除');
      getUserList();
    },
  });
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.left_box {
  overflow-y: hidden!important;;
}
.menu-box {
  padding-top: 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
}
.menu-item {
  margin-bottom: 20px;
  cursor: pointer;
  &-title {
    font-size: 16px;
    margin-left: 10px;
  }
  &.select {
    font-weight: 600;
  }
}

</style>
